Ontdek de Screen Wake Lock API: een krachtige web-API waarmee u kunt voorkomen dat apparaten het scherm dimmen of vergrendelen. Verbeter de gebruikerservaring in mediaspelers, navigatie-apps en meer.
Screen Wake Lock API: Schermsluimer Voorkomen in Webapplicaties
De Screen Wake Lock API is een web-API waarmee webapplicaties kunnen voorkomen dat apparaten het scherm dimmen of vergrendelen. Dit is met name handig voor applicaties waar continue zichtbaarheid van het scherm essentieel is, zoals mediaspelers, navigatie-apps en applicaties die gedurende langere tijd gebruikersinteractie vereisen.
Waarom is Screen Wake Lock Belangrijk?
In de wereld van vandaag verwachten gebruikers naadloze ervaringen. Een apparaat dat automatisch het scherm dimt of vergrendelt, kan deze ervaringen verstoren, vooral wanneer gebruikers actief bezig zijn met een webapplicatie. Denk aan de volgende scenario's:
- Video Afspelen: Stel u voor dat u een film kijkt of een kooktutorial volgt, en het scherm voortdurend dimt, waardoor u op het scherm moet tikken om het actief te houden. Dit is een frustrerende ervaring.
- Navigatie-apps: Tijdens het rijden met een navigatie-app moet het scherm aanblijven om continue aanwijzingen te geven. Een dimmend of vergrendeld scherm kan leiden tot gemiste afslagen en potentiële veiligheidsrisico's.
- Presentatie-apps: Bij het presenteren van dia's of het weergeven van belangrijke informatie moet het scherm gedurende de hele presentatie actief blijven.
- Gaming-applicaties: Veel games vereisen ononderbroken schermzichtbaarheid voor de gameplay. Schermsluimer kan de spelervaring verstoren.
- Online Whiteboards: Voor samenwerking op een online whiteboard moet het scherm actief blijven, zodat gebruikers niet herhaaldelijk hoeven te tikken om opnieuw te verbinden.
De Screen Wake Lock API biedt een oplossing voor deze problemen, waardoor webapplicaties de aan/uit-status van het scherm kunnen beheren en een naadloze en gebruiksvriendelijkere ervaring kunnen bieden.
Browserondersteuning
Eind 2024 heeft de Screen Wake Lock API solide ondersteuning in de belangrijkste browsers. Het is echter altijd cruciaal om de nieuwste informatie over browsercompatibiliteit te controleren op bronnen zoals Mozilla Developer Network (MDN) en Can I use om optimale cross-browser compatibiliteit te garanderen. Browserondersteuning kan variëren afhankelijk van de browserversie en het besturingssysteem.
De Screen Wake Lock API Gebruiken
De Screen Wake Lock API is relatief eenvoudig te gebruiken. Hier is een overzicht van de belangrijkste stappen:
1. Controleer op API-ondersteuning
Voordat u de API probeert te gebruiken, is het essentieel om te controleren of de browser van de gebruiker deze ondersteunt. Dit voorkomt fouten in browsers die de API niet implementeren.
if ('wakeLock' in navigator) {
// Screen Wake Lock API wordt ondersteund
} else {
// Screen Wake Lock API wordt niet ondersteund
console.log('Screen Wake Lock API wordt niet ondersteund door deze browser.');
}
2. Een Wake Lock Aanvragen
Om een wake lock aan te vragen, gebruikt u de navigator.wakeLock.request() methode. Deze methode retourneert een Promise die wordt vervuld met een WakeLockSentinel-object als het verzoek succesvol is. Het WakeLockSentinel-object vertegenwoordigt de actieve wake lock.
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('Screen wake lock is actief!');
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock is vrijgegeven');
});
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
// Roep deze functie aan om de wake lock te activeren
requestWakeLock();
In dit voorbeeld probeert de requestWakeLock()-functie een screen wake lock te verkrijgen. Het 'screen'-argument geeft aan dat we willen voorkomen dat het scherm dimt of vergrendelt. Als het verzoek succesvol is, wordt er een bericht naar de console gelogd. De code bevat ook een foutafhandeling om eventuele uitzonderingen op te vangen die tijdens het wake lock-verzoek kunnen optreden. Cruciaal is dat de code een event listener toevoegt om te luisteren naar het "release"-event, wat aangeeft wanneer de Wake Lock niet langer actief is. Dit kan gebeuren als de gebruiker de lock expliciet heeft vrijgegeven of als het systeem deze heeft teruggevorderd vanwege energiebesparende maatregelen.
3. De Wake Lock Vrijgeven
Het is cruciaal om de wake lock vrij te geven wanneer deze niet langer nodig is. Als u dit niet doet, kan de batterij van het apparaat leeglopen en de gebruikerservaring negatief beïnvloeden. Om de wake lock vrij te geven, roept u de release()-methode aan op het WakeLockSentinel-object.
const releaseWakeLock = async () => {
if (wakeLock) {
await wakeLock.release();
wakeLock = null;
console.log('Screen wake lock vrijgegeven!');
}
};
// Roep deze functie aan om de wake lock vrij te geven
releaseWakeLock();
Deze functie geeft de wake lock veilig vrij en stelt de wakeLock-variabele in op null. Het is essentieel om ervoor te zorgen dat de wakeLock-variabele correct wordt beheerd om fouten bij het vrijgeven van de lock te voorkomen.
4. Omgaan met Wake Lock Release Events
Het systeem kan de wake lock om verschillende redenen vrijgeven, zoals inactiviteit van de gebruiker of een lage batterijspanning. Het is belangrijk om te luisteren naar het release-event op het WakeLockSentinel-object om op een nette manier met deze situaties om te gaan. Dit stelt u in staat om de wake lock opnieuw aan te vragen of andere passende acties te ondernemen.
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock is vrijgegeven');
// Probeer de wake lock opnieuw aan te vragen
// of neem andere passende acties
requestWakeLock(); // Bijvoorbeeld het opnieuw aanvragen van de wakelock
});
Dit voorbeeld laat zien hoe u kunt luisteren naar het release-event en mogelijk de wake lock opnieuw kunt aanvragen. De daadwerkelijke implementatie hangt af van de specifieke vereisten van uw applicatie.
Best Practices en Overwegingen
Hoewel de Screen Wake Lock API een krachtig hulpmiddel is, is het essentieel om deze verantwoord te gebruiken en de volgende best practices in overweging te nemen:
- Vraag Wake Locks Alleen Aan Wanneer Nodig: Vermijd het onnodig verkrijgen van wake locks, omdat ze de batterij van het apparaat kunnen leegmaken. Vraag alleen een wake lock aan wanneer continue schermzichtbaarheid echt essentieel is voor de gebruikerservaring.
- Geef Wake Locks Snel Vrij: Geef de wake lock vrij zodra deze niet langer nodig is. Dit helpt om batterijvermogen te besparen en onnodig verbruik te voorkomen.
- Handel Release Events Netjes Af: Wees voorbereid op het onverwacht vrijgeven van de wake lock door het systeem. Luister naar het
release-event en onderneem passende acties, zoals het opnieuw aanvragen van de wake lock of het informeren van de gebruiker. - Bied Gebruikersbediening: Overweeg om gebruikers bedieningselementen te bieden om de wake lock-functie in of uit te schakelen. Dit geeft gebruikers meer controle over het stroomverbruik van hun apparaat en stelt hen in staat het gedrag van de applicatie aan te passen. Een mediaspeler kan bijvoorbeeld een "Houd scherm aan"-schakelaar hebben.
- Houd Rekening met de Batterijduur: Wees u bewust van de impact op de batterijduur. Het continu aanhouden van het scherm kan de batterijduur aanzienlijk verkorten, vooral op mobiele apparaten. Informeer gebruikers over de mogelijke impact en bied opties om dit te beperken.
- Toestemming van de Gebruiker: Hoewel de API zelf niet direct om toestemming van de gebruiker vraagt, is het een goede gewoonte om de gebruiker te informeren dat de applicatie voorkomt dat het scherm in de slaapstand gaat en hen de mogelijkheid te bieden dit gedrag uit te schakelen.
- Fallback-mechanisme: Overweeg voor browsers die de API niet ondersteunen een fallback-mechanisme te implementeren. Dit kan inhouden dat JavaScript wordt gebruikt om periodiek dummy-events naar het scherm te sturen om te voorkomen dat het dimt of vergrendelt. Wees u er echter van bewust dat deze aanpak minder betrouwbaar en resource-intensiever kan zijn dan het gebruik van de Screen Wake Lock API.
- Testen: Test uw applicatie grondig op verschillende apparaten en browsers om ervoor te zorgen dat de Screen Wake Lock API naar verwachting werkt. Besteed aandacht aan het batterijverbruik en de gebruikerservaring.
- Toegankelijkheid: Wees u ervan bewust dat het altijd aanhouden van het scherm voor sommige gebruikers problematisch kan zijn. Het bieden van manieren om de screen wake lock uit te schakelen, maakt uw applicatie toegankelijker.
Praktijkvoorbeelden
Hier zijn enkele praktijkvoorbeelden van hoe de Screen Wake Lock API in verschillende applicaties kan worden gebruikt:
- Mediaspelers: Een video-streamingapp kan de Screen Wake Lock API gebruiken om te voorkomen dat het scherm dimt tijdens het afspelen, wat zorgt voor een naadloze kijkervaring.
- Navigatie-apps: Een navigatie-app kan de API gebruiken om het scherm aan te houden terwijl de gebruiker rijdt, zodat de aanwijzingen altijd zichtbaar zijn.
- Presentatie-apps: Een presentatie-app kan de API gebruiken om te voorkomen dat het scherm dimt tijdens een presentatie, zodat het publiek de dia's altijd kan zien.
- Fitness-apps: Een fitness-app die een trainingssessie bijhoudt, kan het scherm aanhouden zodat gebruikers snel hun statistieken kunnen bekijken zonder hun apparaat te hoeven ontgrendelen.
- Recepten-apps: Een recepten-app kan de API gebruiken om het scherm aan te houden terwijl de gebruiker een recept volgt, waardoor wordt voorkomen dat het scherm dimt terwijl de gebruiker aan het koken is.
- Kioskapplicaties: Kioskapplicaties profiteren van deze functie. Zelfbedieningskiosken op luchthavens of in restaurants kunnen bijvoorbeeld de Screen Wake Lock API gebruiken om ervoor te zorgen dat het scherm actief en responsief blijft voor gebruikersinteracties.
- Telegeneeskunde-applicaties: Tijdens virtuele doktersafspraken, met name die waarbij observatie vereist is, kan de Screen Wake Lock API worden gebruikt om ervoor te zorgen dat het scherm gedurende het hele consult aanblijft.
Codevoorbeeld: Mediaspeler met Screen Wake Lock
Dit voorbeeld laat zien hoe u de Screen Wake Lock API implementeert in een eenvoudige mediaspelerapplicatie.
<!DOCTYPE html>
<html>
<head>
<title>Mediaspeler met Screen Wake Lock</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="your-video.mp4" type="video/mp4">
Uw browser ondersteunt de videotag niet.
</video>
<button id="wakeLockBtn">Screen Wake Lock Inschakelen</button>
<script>
const video = document.getElementById('myVideo');
const wakeLockBtn = document.getElementById('wakeLockBtn');
let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log('Screen wake lock is actief!');
wakeLockBtn.textContent = 'Screen Wake Lock Uitschakelen';
wakeLock.addEventListener('release', () => {
console.log('Screen Wake Lock is vrijgegeven');
wakeLockBtn.textContent = 'Screen Wake Lock Inschakelen';
});
} catch (err) {
console.error(`${err.name}, ${err.message}`);
}
};
const releaseWakeLock = async () => {
if (wakeLock) {
await wakeLock.release();
wakeLock = null;
console.log('Screen wake lock vrijgegeven!');
wakeLockBtn.textContent = 'Screen Wake Lock Inschakelen';
}
};
wakeLockBtn.addEventListener('click', () => {
if (wakeLock) {
releaseWakeLock();
} else {
requestWakeLock();
}
});
// Optioneel: Vraag automatisch een wake lock aan wanneer de video begint met afspelen
video.addEventListener('play', () => {
if(!wakeLock){
requestWakeLock();
}
});
</script>
</body>
</html>
Deze code creëert een eenvoudige mediaspeler met een knop om de screen wake lock in of uit te schakelen. Wanneer op de knop wordt geklikt, vraagt de code een nieuwe wake lock aan of geeft de bestaande vrij. De tekst op de knop wordt bijgewerkt om de huidige status van de wake lock weer te geven. Dit voorbeeld bevat ook een optionele event listener die automatisch de wake lock aanvraagt wanneer de video begint met afspelen. Opmerking: Vervang your-video.mp4 door het daadwerkelijke pad naar uw videobestand.
Veiligheidsoverwegingen
De Screen Wake Lock API is ontworpen met veiligheid in gedachten. Browsers implementeren verschillende beveiligingsmaatregelen om misbruik van de API te voorkomen. Browsers kunnen bijvoorbeeld de duur beperken waarvoor een wake lock kan worden vastgehouden of gebruikersinteractie vereisen voordat een wake lock wordt verleend. Volg altijd de best practices die eerder in dit artikel zijn beschreven om ervoor te zorgen dat u de API op een verantwoorde en ethische manier gebruikt.
Alternatieven voor de Screen Wake Lock API
Voorafgaand aan de Screen Wake Lock API gebruikten ontwikkelaars vaak "hacks" om schermsluimer te voorkomen. Deze methoden zijn over het algemeen onbetrouwbaar en worden niet aanbevolen.
- No-Op Video-element: Een klein, stil video-element op de pagina invoegen en continu afspelen. Dit misleidt het systeem door te denken dat er media wordt afgespeeld, waardoor de slaapstand wordt voorkomen. Dit is extreem resource-intensief.
- Dummy AJAX-verzoeken: Periodiek AJAX-verzoeken naar de server sturen om het apparaat "actief" te houden. Dit is een slechte vervanging, omdat het netwerkintensief en onbetrouwbaar is.
Deze methoden worden niet aanbevolen, omdat ze onbetrouwbaar zijn en de prestaties en batterijduur negatief kunnen beïnvloeden. De Screen Wake Lock API is de aanbevolen oplossing voor het voorkomen van schermsluimer in webapplicaties.
Conclusie
De Screen Wake Lock API is een waardevol hulpmiddel voor webontwikkelaars die naadloze en boeiende gebruikerservaringen willen creëren. Door te voorkomen dat apparaten het scherm dimmen of vergrendelen, kunt u ervoor zorgen dat uw applicaties zichtbaar en responsief blijven, zelfs tijdens langere perioden van inactiviteit. Onthoud dat u de API verantwoord moet gebruiken en de best practices in dit artikel moet volgen om te voorkomen dat de batterij van het apparaat leegloopt en de gebruikerservaring negatief wordt beïnvloed. Naarmate de API breder wordt toegepast, zal het ongetwijfeld een essentieel onderdeel van de webontwikkelingstoolkit worden. Omarm de kracht van de Screen Wake Lock API om uw webapplicaties naar een hoger niveau te tillen en uw gebruikers wereldwijd een aangenamere ervaring te bieden.